<template>
    <page-layout>
       <template v-slot:header>
            <el-input v-model="query.name" placeholder="输入产品名字查询" size="small"></el-input>
            <el-button type="primary" size="small" @click="queryEvt">查询</el-button>
            <el-button size="small" type="success" @click="addSample">新增</el-button>
        </template>

            <el-table :data="tableData"
                height="100%"
                style="width: 100%"
                size="small">
                <el-table-column prop="name" label="样品名称" width="180" fixed> </el-table-column>
                <el-table-column prop="brand" label="品牌" width="180"> </el-table-column>
                <el-table-column prop="type" label="类型" width="180">
                    <template v-slot="data"> 
                        <div>
                            {{data.row.type | typeFilter(medicalType)}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="180"> 
                    <template v-slot="data">
                        <div>
                            {{ data.row.unit | typeFilter(unitType)}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="place" label="产地" width="180" show-overflow-tooltip> </el-table-column>
                <el-table-column label="操作" width="180" fixed="right" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <el-button type="text" size="small" @click="editEvt(row)">编辑</el-button>
                        <el-button type="text" @click="detailEvt(row)" size="small">详情</el-button>
                        <!-- <el-popconfirm :title="`确定要删除吗【${row.name}】产品信息，删除后不能恢复，确定要删除吗？`">
                            <el-button slot="reference" @click="deleteEvt()" style="margin: 0 6px" type="text" size="small">删除</el-button>
                        </el-popconfirm> -->
                        <el-popconfirm :title="`确定要删除吗【${row.name}】产品信息，删除后不能恢复，确定要删除吗？`" @confirm="deleteEvt(row.id)" >
                            <el-button slot="reference"  style="margin: 0 6px" type="text" size="small">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
 
        <template v-slot:footer>
            <el-pagination :page-sizes="[20, 50, 100, 150]"
                :page-size="query.size"
                :current-page="query.page"
                @size-change="sizeChange"
                @current-change="currentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </template>
    </page-layout>
</template>

<script>
import { dictListApi, sampleApi, sampleDeleteApi } from '@/apis/productApi'
    export default {
        data() {
            return {
                tableData: [],
                total: 0,
                total: 0,
                query: {
                    page: 1,
                    size: 20,
                    name: ''
                },
                changeTimer: null,
                medicalType: [],
                unitType: []
            }
        },

        filters: {
            // typeFilter(val) {
            //     console.log(val)
            // }
        },

        async mounted() {
        //     let result = await dictListApi('MEDICAL')
        //     if (result.code === 200) {
        //         this.medicalType = result.data.rows
        //     }
        //    this.getList()
            Promise.all(
                [
                    dictListApi('MEDICAL'),
                    dictListApi('UNITS')
                ]
            ).then(d => {
                if (d[0].code === 200) this.medicalType = d[0].data.rows
                if (d[1].code === 200) this.unitType = d[1].data.rows
            })

            this.getList()
        },
        methods: {
           
            async deleteEvt(id) {
               let result = await sampleDeleteApi(id)
               this.getList() 
               if (result.code === 200) {
                this.$message({ message: '删除成功！', type: 'success'  })
               }
            },
            dataEvt(d) {
                console.log(d)
            },
            //根据新的条件进行查询，那么必须从第一页开始查询
            async queryEvt() {
                this.query.page = 1
                this.getList()                
            },
            //获取列表数据的方法
            async getList() {
                let result = await sampleApi(this.query)
                if (result.code ===200) {
                    this.tableData = result.data.rows
                    this.total = result.data.count
                }
            },  
            sizeChange(size) { 
                this.query.size = size
                if (this.changeTimer) clearTimeout(this.changeTimer)
                this.changeTimer = setTimeout(() => {
                    this.getList()
                },100)
            },
            currentChange(page) {
                this.query.page = page
                if (this.changeTimer) clearTimeout(this.changeTimer)
                this.changeTimer = setTimeout(() => {
                    this.getList()
                },100)
            },
            detailEvt(data) {
                localStorage.setItem('sampleFlag','true')
                console.log(data)
                this.$store.commit('common/setSampleList', data)
                this.$router.push('/product/sample/detail')
            },

            editEvt(data) {
                this.$router.push('/product/sample/edit')
            },
            addSample() {

                this.$router.push('/product/sample/edit')
            }
            
        }
    }
</script>

<style lang="less" scoped>

</style>